<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>屏幕共享</title>
</head>
<style>
  #share {
    width: 80vw;
    height: 80vh;
  }
</style>
<body>
  <video id="share" muted></video>
  <script>
    const v = document.querySelector('#share');
    setTimeout(async () => {
      // 无法同时采集音视频
      const stream = await navigator.mediaDevices.getDisplayMedia({
        video: true,
        audio: false
      });
      v.srcObject = stream;
      console.log(stream)
      console.log(v)
      // 交互之前的播放需要保证静音
      v.play();
    }, 1000);
  </script>
</body>
</html>